<template>
    <div>
        <div class="main-head  flex-between container-fluid">
            <div class="title">
                <h1>{{ $t('pro.settings.settings') }}</h1>
            </div>
        </div>

        <div class="content container-fluid">
            <div class="portlet">
                <a-spin :spinning="loading">
                    <a-form :form="form" layout="vertical" @submit="handleSubmit">
                        <div class="conditions grid">
                            <!-- E-mail Settings -->
                            <div class="grid-item">
                                <div class="grid-item-title">
                                    <h3 v-text="$t('pro.settings.emailSet')"></h3>
                                </div>
                                <div class="grid-item-main">
                                    <a-form-item :label="$t('pro.settings.supportEmail')">
                                        <a-input
                                                v-decorator="['host']"
                                        >
                                        </a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.userName')">
                                        <a-input
                                                v-decorator="['userName']"
                                        >
                                        </a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.password')">
                                        <a-input
                                                v-decorator="['password']"
                                        >
                                        </a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.aplKey')">
                                        <a-input
                                                v-decorator="['nickName']"
                                        >
                                        </a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.fromEmail')">
                                        <a-input
                                                v-decorator="['fromEmail']"
                                        >
                                        </a-input>
                                    </a-form-item>
                                </div>
                            </div>

                            <!-- E-mail Settings -->
                            <div class="grid-item">
                                <div class="grid-item-title">
                                    <h3 v-text="$t('pro.settings.FTPServerSet')"></h3>
                                </div>

                                <div class="grid-item-main">
                                    <a-form-item :label="$t('pro.settings.accessKey')">
                                        <a-input v-decorator="['accessKey']"></a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.secretKey')">
                                        <a-input v-decorator="['secretKey']"></a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.region')">
                                        <a-input v-decorator="['region']"></a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.bucketName')">
                                        <a-input v-decorator="['bucketName']"></a-input>
                                    </a-form-item>

                                    <a-form-item :label="$t('pro.settings.https')">
                                        <a-input v-decorator="['https']"></a-input>
                                    </a-form-item>

                                    <!-- 隐私字段 -->
                                    <a-form-item label="id" v-show="false">
                                        <a-input  v-decorator="['id']"></a-input>
                                    </a-form-item>

                                    <a-form-item label="companyId" v-show="false">
                                        <a-input v-decorator="['companyId']"></a-input>
                                    </a-form-item>

                                    <a-form-item label="userId" v-show="false">
                                        <a-input v-decorator="['userId']"></a-input>
                                    </a-form-item>
                                </div>
                            </div>

                            <!-- 辅助设置 -->
                            <div class="grid-item">
                                <div class="grid-item-title" style="border-bottom: 1px solid #c2cad8;">
                                    <h3 v-text="$t('pro.settings.auxiliary')"></h3>
                                </div>
                                <div class="grid-item-main">
                                    <a-form-item :label="$t('pro.settings.isRegister')">
                                        <a-switch v-decorator="['isRegister', { valuePropName: 'checked' }]"/>
                                    </a-form-item>
                                </div>

                                <div class="grid-item-main">
                                    <a-form-item :label="$t('pro.settings.adminDocument')">
                                        <a-button type="primary" icon="edit" @click="toSetUp">Edit</a-button>
                                    </a-form-item>
                                </div>
                            </div>
                        </div>

                        <div style="margin-bottom: 10px">
                            <a-button type="primary" html-type="submit">
                                {{ $t('pro.public.buttonSave')}}
                            </a-button>
                        </div>
                    </a-form>
                </a-spin>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCompanyConfig, editConfig } from '../../../api/company-style'
    export default {
        name: "Sitesettings",
        data() {
            return {
                form: this.$form.createForm(this),
                id: 1,
                loading: false
            }
        },
        methods: {
            handleSubmit(e) {
                this.loading = true
                e.preventDefault();
                this.form.validateFields((err, params) => {
                    if (!err) {
                        params.companyId = this.$store.getters.companyInfo.companyId;
                        params.id = this.id;

                        params.isRegister = +params.isRegister
                        setTimeout(() => {
                            editConfig(params).then(res => {
                                let { code } = res.data || {}
                                if (code == 200) {
                                    this.$message.success(this.$t('pro.Editcampaigns.operationSuccess'))
                                    this.initConFig();
                                }
                            }).finally(() => {
                                this.loading = false
                            })
                        }, 1000)

                    }
                });
            },

            //查询配置
            initConFig() {
                this.$nextTick(() => {
                    this.loading = true;
                    getCompanyConfig().then(res => {
                        let { data, code } = res.data
                        if (code == 200) {
                            this.id = data.id;
                            for(let [key, value] of Object.entries(data)) {
                                //把 0、1 的表单字段 设置单选的false/true
                                if (key === 'isRegister') {
                                    this.form.setFieldsValue({ [key]: !!value })
                                } else {
                                    this.form.setFieldsValue({ [key]: value })
                                }
                            }
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                });
            },

            toSetUp() {
                this.$router.push({path: '/admin/sitesettings/set' })
            }
        },
        mounted() {
            this.initConFig()
        }
    }
</script>

